import {Image, StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {Stack, useRouter, useLocalSearchParams} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import {getMeetQuestionList} from "@/services/login";
import {loadingService} from "@/utils/loadingServer";

export default function meetQuestionScreen() {

    const router = useRouter();
    const [questionList, setQuestionList] = useState([]);

    const goMeetQuestionDetail = function(id) {
        router.push(`/meetQuestionDetail/${id}`);
    };

    useEffect(() => {
        loadingService.show();
        getMeetQuestionList()
            .then(res => {
                setQuestionList(res.data);
                loadingService.hide()
            })
            .catch(err => {
                console.log('err', err);
                loadingService.hide();
            })
    }, [])

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '遇到问题', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.meetQuestionContainer}>
                {
                    questionList.map((item: any, index: number) => {
                        return (
                            <TouchableOpacity onPress={() => goMeetQuestionDetail(item?.issueId)}>
                                <View style={styles.questionItem} key={item?.issueId}>
                                    <Text>
                                        { item?.issueName }
                                    </Text>
                                    <AntDesign name="right" size={12} color="#B5B6C1" />
                                </View>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>

        </View>

    );
}

const styles = StyleSheet.create({
    meetQuestionContainer: {
        padding: 12,
    },
    questionItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: 22,
    },
});
